<template>
  <div class="page-content">
    <my-Table
      v-bind="attrs"
      :dataList="dataList"
      :propList="columnsList"
      :paginationConfig="paginationConfig"
      v-model:page="pageInfo"
      isShowSelectColumns
      isShowIndexColumns
      title="233"
    >
      <template #headerHandler>
        <div class="ll">
          <!-- v-if="isCreate" -->
          <el-button @click="handlerNewClick" size="mini" type="primary">
            新建
          </el-button>
        </div>
      </template>

      <template #createAt="{ row }">
        <div>{{ $filters.timeFormatterUtc(row.createAt) }}</div>
      </template>

      <template #updateAt="{ row }">
        <div>{{ $filters.timeFormatterUtc(row.updateAt) }}</div>
      </template>

      <template #handler="{ row }">
        <div class="handler-btn">
          <!-- v-if="isUpdate" -->
          <el-button @click="handlerEditRow(row)" size="mini" type="text">
            编辑
          </el-button>
          <!-- v-if="isDelete" -->
          <el-button
            :loading="row.isMyDeleteLoading"
            @click="handlerDeleteRow(row)"
            type="danger"
            size="mini"
          >
            删除
          </el-button>
        </div>
      </template>

      <!-- 跨组件插槽 -->
      <template
        v-for="item in otherPropSlots"
        #[item.prop]="{ row }"
        :key="item.prop"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="row" />
        </template>
      </template>
    </my-Table>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, ref, readonly, watch } from 'vue';
import myTable, { IPagination } from '@/components/myTable/myTable.vue';
import { ITablePropList } from '@/components/myTable/types/index';

import { useStore } from '@/store';
import { usePermission } from '@/hooks/usePermission';

export default defineComponent({
  props: {
    columnsList: {
      type: Array as PropType<ITablePropList>,
      required: true,
    },

    pageName: {
      type: String,
      required: true,
    },
  },

  emits: ['newBtnClick', 'editBtnClick'],

  setup(props, ctx) {
    console.log(23333);

    const { emit } = ctx;
    const isCreate = usePermission(props.pageName, 'create');
    const isUpdate = usePermission(props.pageName, 'update');
    const isDelete = usePermission(props.pageName, 'delete');
    const isQuery = usePermission(props.pageName, 'query');

    const store = useStore();
    const dataList = computed(() =>
      store.getters['system/pageListData'](props.pageName)
    );

    const dataCount = computed(() =>
      store.getters['system/pageListCounter'](props.pageName)
    );

    const pageInfo = ref({
      currentPage: 1,
      pageSize: 10,
    });

    const paginationConfig = ref<IPagination>({
      total: readonly(dataCount) as unknown as number,
      pageSizes: [10, 20, 30],
      layout: ['total', 'pager', 'next', 'jumper', 'sizes'],
    });

    const getPageData = function (queryInfo: any = {}) {
      let { pageSize, currentPage } = pageInfo.value;

      currentPage = currentPage - 1;
      // 没有查询权限
      // if (!isQuery) return;

      store.dispatch('system/getPageListAction', {
        pageName: props.pageName,
        queryInfo: {
          offset: pageSize * currentPage,
          size: pageSize,
          ...queryInfo,
        },
      });
    };

    const excludeSlot = ['handler'];
    const otherPropSlots = props.columnsList.filter((item) => {
      return !excludeSlot.includes(item.prop);
    });

    watch(pageInfo, () => getPageData());

    getPageData();

    const handlerDeleteRow = function (row: any) {
      store.dispatch('system/deletePageData', {
        pageName: props.pageName,
        id: row.id,
      });
    };

    const handlerEditRow = function (row) {
      emit('editBtnClick', row);
    };

    const handlerNewClick = function () {
      emit('newBtnClick');
    };

    return {
      dataList,
      getPageData,
      paginationConfig,
      pageInfo,
      otherPropSlots,
      attrs: ctx.attrs,

      isQuery,
      isCreate,
      isUpdate,
      isDelete,

      handlerDeleteRow,
      handlerEditRow,
      handlerNewClick,
    };
  },

  components: {
    myTable,
  },
});
</script>

<style lang="less" scoped>
.page-content {
  height: 100%;
}
</style>
